<script setup lang="ts">
import dayjs from 'dayjs'
import { useRequest } from 'vue-request'
import { fetchClaimCouponListAPI } from '@/apis/fetchClaimCouponList'
import { useGeneralConfigStore } from '@/store/generalConfig'
import { useUserInfoStore } from '@/store/userInfo'
import { ClaimCouponAPI } from '@/apis/claimCoupon'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const generalConfigStore = useGeneralConfigStore()

const { data, loading } = useRequest(() => fetchClaimCouponListAPI(userInfoStore.userInfo!.token!).then(res => res.data?.data))

/**
 *
 * @param couponIds - 要领取的优惠券列表，以','分割的字符串
 */
async function claimCoupon(couponIds: string) {
  const res = await ClaimCouponAPI({
    id: couponIds,
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1)
    return
  uni.showModal({
    title: '领取成功',
    showCancel: false,
    success: () => router.push('couponList'),
    confirmText: '查看',
  })
}
</script>

<template>
  <view class="min-h-screen bg-#92DFDB px-24rpx">
    <image
      class="absolute top-0 h-760rpx w-screen x-center"
      :src="withDomain(generalConfigStore.generalConfig?.images)"
      mode="aspectFill"
    />
    <Spacer height="700" />
    <view class="relative rounded-20rpx bg-white px-30rpx py-40rpx">
      <Title>新人优惠券礼包</Title>
      <Spacer height="36" />
      <CouponAlt2
        v-for="coupon in data?.new_coupon"
        :key="coupon.id"
        :type="coupon.name"
        :price="coupon.complete_money"
        :minisum="coupon.money"
        :expire-time="dayjs.unix(coupon.use_end_time).format('YYYY.MM.DD')"
        @tap="claimCoupon(coupon.id.toString())"
      />
      <Spacer height="14" />
      <view class="flex items-center justify-center">
        <RGButton
          corner="full"
          width="360"
          background-color="#FA662F"
          tapped-background-color="#D8450F"
          @tap="data ? claimCoupon(data.new_coupon.map(el => el.id).join(',')) : undefined"
        >
          立即领取
        </RGButton>
      </view>
    </view>
    <Spacer height="30" />
    <view class="rounded-20rpx bg-white px-30rpx py-40rpx">
      <Title>周末打车券</Title>
      <Spacer height="24" />
      <view class="flex items-center overflow-x-scroll">
        <CouponVertical
          v-for="coupon in data?.week_user_coupon"
          :key="coupon.id"
          :type="coupon.name"
          :price="coupon.complete_money"
          :minisum="coupon.money"
          :expire-time="dayjs.unix(coupon.use_end_time)"
          :expired="coupon.use_end_time < dayjs(Date.now()).unix()"
          :num="coupon.num"
          @tap="claimCoupon(coupon.id.toString())"
        />
      </view>
    </view>
    <Spacer height="30" />
    <view class="rounded-20rpx bg-white px-30rpx py-40rpx">
      <Title>老用户回馈券</Title>
      <Spacer height="24" />
      <CouponAlt2
        v-for="coupon in data?.old_user_coupon"
        :key="coupon.id"
        :type="coupon.name"
        :price="coupon.complete_money"
        :minisum="coupon.money"
        :expire-time="dayjs.unix(coupon.use_end_time).format('YYYY.MM.DD')"
        @tap="claimCoupon(coupon.id.toString())"
      />
    </view>
    <view class="py-36rpx text-center text-28rpx text-#666666 leading-28rpx">
      通达电召优惠券使用说明
    </view>
    <Spacer height="180" />
  </view>
  <view class="fixed bottom-40rpx z-50 x-center">
    <RGButton
      background-color="#FA662F"
      tapped-background-color="#D8450F"
      @tap="router.pushTab('home')"
    >
      去打车
    </RGButton>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'claimCoupon'
style:
  navigationBarTitleText: '领车费'
  navigationBarBackgroundColor: '#44B3FA'
  backgroundColor: '#92DFDB'
layout: 'custom'
</route>
